<template>
  <x-page>
    <x-filter @search="handleSearch" @reset="resetSearch" :itemLength="2">
      <x-filter-item :label="'采购组织名称'">
        <el-input
          v-model="searchParams.purchaseOrgName"
          :placeholder="'请输入采购组织名称'"
          clearable
          maxlength="50"
        ></el-input>
      </x-filter-item>
      <x-filter-item :label="'采购组织编码'">
        <el-input
          v-model="searchParams.purchaseOrgCode"
          :placeholder="'请输入采购组织编码'"
          clearable
          maxlength="50"
        ></el-input>
      </x-filter-item>
    </x-filter>
    <x-data>
      <template #tool>
        <el-row type="flex" class="tools" justify="space-between">
          <el-col :span="20">
            <el-button type="primary" :icon="buttonIcons('add')" @click="add"> {{ '新增' }}</el-button>
          </el-col>
          <el-col :span="4" class="tools-config">
            <x-column-config :columns="columns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <x-table
        ref="tableCom"
        :pagination="pagination"
        :data-source="tableData"
        :loading="loading"
        :row-key="'id'"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :min-width="item.minWidth || '-'"
          :label="item.label"
          :sortable="'custom'"
        >
        </el-table-column>
        <el-table-column fixed="right" label="操作" :align="'center'" width="160">
          <template #default="scope">
            <more-table-actions
              :permis-list="permissionsActions"
              :action-list="getActions(actions, scope.row)"
              :row="scope.row"
              @onActionClick="handleActions"
            />
          </template>
        </el-table-column>
      </x-table>
    </x-data>
    <x-dialog
      :title="dialogTitle"
      :show.sync="visible"
      v-if="visible"
      @onCancel="handleClose"
      @onSubmit="handleSubmit"
      width="35%"
    >
      <el-form :model="params" :rules="rules" ref="params" label-position="top">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item :label="'采购组织编码'" prop="purchaseOrgCode">
              <el-input
                v-model="params.purchaseOrgCode"
                :placeholder="'请输入采购组织编码'"
                clearable
                maxlength="50"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="'采购组织名称'" prop="purchaseOrgName">
              <el-input
                v-model="params.purchaseOrgName"
                :placeholder="'请输入采购组织名称'"
                clearable
                maxlength="50"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </x-dialog>
  </x-page>
</template>

<script>
  import { buttonIcons, PermissionsMixin, QueryDictMixin, TableListMixin, throttle } from '@package/utils'
  import {
    apiPurchasingOrgAdd,
    apiPurchasingOrgDelete,
    apiPurchasingOrgUpdate,
    purchasingOrgListUrl
  } from '@/modules/config/api/businessOrgConfig'
  import { purchasingOrgColumns, purchasingOrgActions } from '@/modules/config/config/businessOrgConfig.js'
  import { EnumApiCode } from '../../../../../../../globalEnum.js'

  export default {
    name: 'PurchasingOrg',
    mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
    data() {
      return {
        columns: purchasingOrgColumns,
        actions: purchasingOrgActions,
        listUrl: purchasingOrgListUrl,
        searchParams: {
          purchaseOrgName: '',
          purchaseOrgCode: ''
        },
        tableData: [],
        pagination: {
          pageSize: 10,
          pageNum: 1
        },
        visible: false,
        params: {
          purchaseOrgCode: '',
          purchaseOrgName: '',
          id: '',
          state: 1
        },
        rules: {
          purchaseOrgCode: [{ required: true, message: '请输入采购组织编码', trigger: 'blur' }],
          purchaseOrgName: [{ required: true, message: '请输入采购组织名称', trigger: 'blur' }]
        },
        dialogTitle: '新增'
      }
    },
    computed: {
      getActions() {
        return (actions) => {
          return actions.map((action) => {
            action.disabled = false
            return action
          })
        }
      }
    },
    methods: {
      buttonIcons,
      async handleActions({ key, data }) {
        const { id } = data
        switch (key) {
          case 'edit': {
            if (id) {
              this.dialogTitle = '编辑'
              this.params = {
                ...data
              }
            } else {
              this.resetParams()
            }
            this.visible = true
            break
          }
          case 'delete': {
            const confirm = await this.$confirm('是否确定删除?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            if (confirm) {
              const { code } = await apiPurchasingOrgDelete(id)
              if (code === EnumApiCode.Success) {
                this.$message.success('删除成功')
                this.loadData()
              }
            }
            break
          }
          default:
            break
        }
      },
      handleExportExcel() {
        this.handleExport('test')
      },
      handleClose() {
        this.resetParams()
        this.visible = false
      },
      resetParams() {
        this.params.purchaseOrgName = ''
        this.params.purchaseOrgCode = ''
      },
      handleSubmit: throttle(async function () {
        const methods = this.params.id ? apiPurchasingOrgUpdate : apiPurchasingOrgAdd
        const { code } = await methods(this.params)
        if (code === EnumApiCode.Success) {
          this.visible = false
          this.$message.success(`${this.dialogTitle}成功`)
          this.loadData()
        }
      }, 1000),
      add() {
        this.resetParams()
        this.visible = true
      }
    }
  }
</script>

<style scoped></style>
